<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="page-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
            <el-form-item label>
                <el-input v-model="queryForm.loginName" placeholder="登录账号" clearable></el-input>
            </el-form-item>
            <el-form-item label>
                <el-input v-model="queryForm.name" placeholder="姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label>
                <el-input v-model="queryForm.phone" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="queryForm.state" placeholder="请选择状态" clearable>
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="2"></el-option>
                    <el-option label="未开户" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button
                    v-if="authMap['scyh']"
                    type="danger"
                    @click="onDeleteUserBatch"
                    icon="el-icon-delete"
                    :disabled="selectedItems.length <= 0"
                >删除</el-button>
                <el-button
                    v-if="authMap['xjyh']"
                    type="default"
                    @click="onAdd"
                    icon="el-icon-plus"
                >新建</el-button>
            </el-form-item>
        </el-form>
        <table-ex
            ref="tableEx"
            :queryCallback="queryCallback"
            :handleSelectionChange="onSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="账号">
                <template slot-scope="scope">
                    <div>
                        <strong
                            style="margin-right:10px;"
                            v-if="scope.row.loginName"
                        >{{scope.row.loginName}}</strong>
                        <el-tag
                            size="small"
                            v-if="scope.row.state == 1 && scope.row.effectTime == null"
                            type="warning"
                            :disable-transitions="true"
                            effect="plain"
                        >未开户</el-tag>
                        <el-tag
                            size="small"
                            v-if="scope.row.state == 2"
                            type="danger"
                            :disable-transitions="true"
                            effect="plain"
                        >禁用</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="用户姓名" width="160"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column label="角色" width="150">
                <template slot-scope="scope">
                    <el-tag
                        v-for="item in scope.row.roleList"
                        :key="item.id"
                        :disable-transitions="true"
                        size="small"
                        effect="plain"
                    >{{item.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="deptName" label="所属组织"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.effectTime !== null && scope.row.state == 1"
                        type="default"
                        size="mini"
                        class="button-in-cell"
                        disabled
                        @click="onDetail(scope.row.id)"
                    >详情</el-button>
                    <el-button
                        v-if="scope.row.effectTime === null && authMap['kh']"
                        type="primary"
                        size="mini"
                        class="button-in-cell"
                        @click="onActive(scope.row.id)"
                    >开户</el-button>
                    <el-button
                        v-if="scope.row.state !== 1 && authMap['qyjyyh']"
                        type="success"
                        size="mini"
                        class="button-in-cell"
                        @click="onEnableUser(scope.row)"
                    >启用</el-button>
                    <el-button
                        v-if="authMap['yhbj']"
                        type="default"
                        size="mini"
                        class="button-in-cell"
                        @click="onUpdate(scope.row.id)"
                    >编辑</el-button>
                    <el-dropdown size="small" style="margin-left:10px;">
                        <span class="el-dropdown-link">
                            <el-button type="default" size="mini" class="button-in-cell">
                                更多
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                v-if="scope.row.effectTime === null || scope.row.state !== 1"
                                icon="iconfont icon-detail"
                                @click.native="onDetail(scope.row.id)"
                                disabled
                            >详情</el-dropdown-item>
                            <el-dropdown-item
                                icon="iconfont icon-propertysafety"
                                v-if="scope.row.effectTime != null && authMap['yhbj']"
                                @click.native="onAccount(scope.row.id)"
                            >账号安全</el-dropdown-item>
                            <el-dropdown-item
                                v-if="scope.row.effectTime != null && authMap['czmm']"
                                icon="iconfont icon-lock"
                                @click.native="onResetPassword(scope.row)"
                            >密码重置</el-dropdown-item>
                            <el-dropdown-item
                                v-if="scope.row.effectTime != null && authMap['yhjsfp']"
                                icon="iconfont icon-team"
                                @click.native="onUserRole(scope.row.id)"
                            >角色分配</el-dropdown-item>
                            <el-dropdown-item
                                v-if="scope.row.state === 1 && scope.row.effectTime != null && authMap['qyjyyh']"
                                style="color:#E6A23C"
                                icon="el-icon-remove-outline"
                                divided
                                @click.native="onDisableUser(scope.row)"
                            >禁用</el-dropdown-item>
                            <el-dropdown-item
                                v-if="authMap['scyh']"
                                style="color:#ed4014"
                                icon="el-icon-delete"
                                :divided="scope.row.state !== 1"
                                @click.native="onDelete(scope.row)"
                            >删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </table-ex>
        <sys-user-add :show="showAddDialog" :success="onAddSuccess" :cancel="onAddCancel"></sys-user-add>
        <sys-user-detail
            :show="showDetailDialog"
            :success="onDetailSuccess"
            :cancel="onDetailCancel"
            :id="detailId"
        ></sys-user-detail>
        <sys-user-update
            :show="showUpdateDialog"
            :success="onUpdateSuccess"
            :cancel="onUpdateCancel"
            :id="updateId"
        ></sys-user-update>
        <sys-user-active
            :show="showActiveDialog"
            :success="onActiveSuccess"
            :cancel="onActiveCancel"
            :id="activeId"
        ></sys-user-active>
        <sys-user-account
            :show="showAccountDialog"
            :success="onAccountSuccess"
            :cancel="onAccountCancel"
            :id="accountId"
        ></sys-user-account>
        <sys-user-role
            :show="showUserRoleDialog"
            :success="onUserRoleSuccess"
            :cancel="onUserRoleCancel"
            :id="userRoleId"
        ></sys-user-role>
        <sys-user-reset-password
            :show="showResetPasswordDialog"
            :success="onResetPasswordSuccess"
            :cancel="onResetPasswordCancel"
            :user="resetPasswordUser"
        ></sys-user-reset-password>
    </div>
</template>

<script>
import user_api from '../../api/user_api'
import TableEx from '../../components/TableEx.vue'
import SysUserDetail from './SysUserDetail.vue'
import SysUserAdd from './SysUserAdd.vue'
import SysUserUpdate from './SysUserUpdate.vue'
import SysUserActive from './SysUserActive.vue'
import SysUserAccount from './SysUserAccount.vue'
import SysUserRole from './SysUserRole.vue'
import SysUserResetPassword from './SysUserResetPassword.vue'
import { mapState } from 'vuex'
export default {
    name: 'SysUserPage',
    components: {
        TableEx,
        SysUserDetail,
        SysUserAdd,
        SysUserUpdate,
        SysUserActive,
        SysUserAccount,
        SysUserRole,
        SysUserResetPassword,
    },
    data() {
        return {
            queryForm: {},
            selectedItems: [],
            showAddDialog: false,
            showUpdateDialog: false,
            updateId: null,
            showDetailDialog: false,
            showResetPasswordDialog: false,
            detailId: null,
            resetPasswordUser: {},
            showActiveDialog: false,
            activeId: null,
            showAccountDialog: false,
            accountId: null,
            showUserRoleDialog: false,
            userRoleId: null,
        }
    },
    computed: {
        ...mapState({
            authMap: state => state.auth.authMap
        })
    },
    methods: {
        queryCallback(param) {
            return user_api.page({
                query: this.queryForm,
                ...param
            })
        },
        onQuery(event = null, type = 1) {
            this.$refs.tableEx.refresh(type)
        },
        onAdd() {
            this.showAddDialog = true
        },
        onAddSuccess(data) {
            this.showAddDialog = false
            setTimeout(() => {
                this.onActive(data)
            }, 300)
            this.onQuery()
        },
        onAddCancel() {
            this.showAddDialog = false
        },
        onUpdate(id) {
            this.updateId = id
            this.showUpdateDialog = true
        },
        onUpdateSuccess() {
            this.showUpdateDialog = false
            this.onQuery(null, 2)
        },
        onUpdateCancel() {
            this.showUpdateDialog = false
        },
        onActive(id) {
            this.activeId = id
            this.showActiveDialog = true
        },
        onActiveSuccess(data) {
            this.showActiveDialog = false
            this.onQuery(null, 2)
            this.$alert(`登录密码：${data}，请牢记。`, '开户成功', {
                confirmButtonText: '确定'
            })
        },
        onActiveCancel() {
            this.showActiveDialog = false
        },
        onAccount(id) {
            this.accountId = id
            this.showAccountDialog = true
        },
        onAccountSuccess() {
            this.showAccountDialog = false
            this.onQuery(null, 2)
        },
        onAccountCancel() {
            this.showAccountDialog = false
        },
        onDetail(id) {
            this.detailId = id
            this.showDetailDialog = true
        },
        onDetailSuccess() {
            this.showDetailDialog = false
        },
        onDetailCancel() {
            this.showDetailDialog = false
        },
        onDelete(user) {
            this.$confirm(`<p>删除用户：<strong>${user.name}</strong>，是否继续?</p>`, '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                user_api.deleteUser(user.id).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.onQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onDeleteUserBatch() {
            if (this.selectedItems.length <= 0) {
                return
            }
            this.$confirm(`<p>批量删除用户：<p><strong>${this.selectedItems.map(e => e.name).join(", ")}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                user_api.deleteUserBatch(this.selectedItems.map(e => e.id)).then(data => {
                    this.$message.success('批量删除成功!')
                    this.onQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onResetPassword(user) {
            this.resetPasswordUser = user
            this.showResetPasswordDialog = true
        },
        onResetPasswordSuccess() {
            this.showResetPasswordDialog = false
        },
        onResetPasswordCancel() {
            this.showResetPasswordDialog = false
        },
        onUserRole(id) {
            this.userRoleId = id
            this.showUserRoleDialog = true
        },
        onUserRoleSuccess() {
            this.showUserRoleDialog = false
            this.onQuery(null, 2)
        },
        onUserRoleCancel() {
            this.showUserRoleDialog = false
        },
        onSelectionChange(items) {
            this.selectedItems = items
        },
        onDisableUser(user) {
            this.$confirm(`<p>禁用用户：<strong>${user.name}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                user_api.disableUser(user.id).then(data => {
                    this.$message.success('禁用成功')
                    this.onQuery(null, 2)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onEnableUser(user) {
            this.$confirm(`<p>启用用户：<strong>${user.name}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                user_api.enableUser(user.id).then(data => {
                    this.$message.success('启用成功')
                    this.onQuery(null, 2)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        }
    }
}
</script>

<style>
</style>